<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音有尽有</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/index/index.css">
    <link rel="stylesheet"
          href="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css">

</head>
<body>
<div>
    <!-- 顶部导航栏 -->
    <div class="container-fluid p-0">
        <div class="row">
            <!-- 顶部导航栏 -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light w-100">
                <!-- logo -->
                <div class="navbar-header">
                    <a href="#"><img src="<%=request.getContextPath()%>/static/images/logo/shuji-logo.png" width="340px" height="58px"
                                     alt="Logo"></a>
                </div>
                <!-- 项目名 -->
                <a class="navbar-brand" href="#">音有尽有</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!-- 具体导航栏 -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="<%=request.getContextPath()%>/index.jsp">首页<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="<%=request.getContextPath()%>/musicBoxes/musicBoxes.jsp">音乐盒</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="<%= request.getContextPath() %>/playlists/playlists.jsp">播放列表</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="<%= request.getContextPath() %>/play/songlists.jsp" >歌曲列表</a>
                        </li>
                    </ul>
                </div>
                <!-- 搜索框 -->
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
                <!-- 登录注册按钮 -->
                <ul class="nav navbar-nav navbar-right">
                    <c:if test="${user==null}">
                        <li><a href="user/login.jsp">登录</a></li>
                        <li><a href="user/register.jsp">注册</a></li>
                    </c:if>
                    <c:if test="${user!=null}">
                        <li><a style="font-size:16px;color:blueviolet;">欢迎&nbsp;${user.username }</a></li>
                        <!-- 用户个人中心 -->
                        <li class="dropdown">
                            <a href="<%=request.getContextPath()%>/user/personalCenter.jsp"><img src="<%=request.getContextPath()%>${sessionScope.user.profilePicture}"
                                                                    style="margin-top:-10px;width: 38px;height: 38px"
                                                                    alt="Profile Picture"></a>
                        </li>
                    </c:if>
                </ul>
            </nav>
        </div>
    </div>
    <%--主区域--%>
    <div id="content">
        <div class="container" id="homepage_con">
            <!-- 轮播图 -->
            <div class="carousel slide" id="carousel-719915" data-ride="carousel" data-interval="1500">
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#carousel-719915"></li>
                    <li data-slide-to="1" data-target="#carousel-719915"></li>
                    <li data-slide-to="2" data-target="#carousel-719915"></li>
                    <li data-slide-to="3" data-target="#carousel-719915"></li>
                    <li data-slide-to="4" data-target="#carousel-719915"></li>
                </ol>

                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <a href="<%=request.getContextPath()%>/indexPages/three.jsp"><img width="100%" height=400px alt="" src="img/carousel3.jpg"/></a>
                        <div class="carousel-caption">
                            <h4>薛之谦</h4>
                            <p>最好</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <a href="<%=request.getContextPath()%>/indexPages/four.jsp"><img width="100%" height=400px alt="" src="img/carousel4.png"/></a>
                        <div class="carousel-caption">
                            <h4>段奥娟</h4>
                            <p>陪我长大</p>

                        </div>
                    </div>
                    <div class="carousel-item">
                        <a href="<%=request.getContextPath()%>/indexPages/one.jsp"><img width="100%" height=400px alt="" src="img/carousel1.jpg"/></a>
                        <div class="carousel-caption">
                            <h4>张杰</h4>
                            <p>胜利着微笑</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <a href="<%=request.getContextPath()%>/indexPages/five.jsp"><img width="100%" height=400px alt=""
                                                           src="img/carousel5.jpg"/></a>
                        <div class="carousel-caption">
                            <h4>万妮达</h4>
                            <p>WEEKEND</p>

                        </div>
                    </div>
                    <div class="carousel-item">
                        <a href="<%=request.getContextPath()%>/indexPages/two.jsp"><img width="100%" height=400px alt="" src="img/carousel2.jpg"/></a>
                        <div class="carousel-caption">
                            <h4>金志文</h4>
                            <p>青春不一样</p>
                        </div>
                    </div>
                </div>

                <a class="left carousel-control" href="#carousel-719915" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-719915" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>

<%--            <h3 class="section-title">歌曲推荐</h3>--%>
<%--            <div class="row">--%>
<%--                &lt;%&ndash;                albums是后端转发过来的数据&ndash;%&gt;--%>
<%--                <c:forEach var="album" items="${albums}" varStatus="status">--%>
<%--                    <div class="col-md-4">--%>
<%--                        <div class="album-card">--%>
<%--                            <img class="album-image" src="<%=request.getContextPath()%>/img/play.jpg" style="width: 200px; height: 300px"/>--%>
<%--                            <div class="album-caption">--%>
<%--                                    &lt;%&ndash;歌曲名&ndash;%&gt;--%>
<%--                                <h4>${album.title}</h4>--%>
<%--                                    &lt;%&ndash;上传者id&ndash;%&gt;--%>
<%--                                <p>${album.uploaderId}</p>--%>
<%--                                <a class="btn btn-primary"--%>
<%--                                   href="PlayServlet?name=${album.artist}%20-%20${album.albumName}"--%>
<%--                                   onclick="play('audio/${album.audio}')">播放</a>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </c:forEach>--%>
<%--            </div>--%>

<%--            <audio id="km_aud" controls="controls" style="display: none">--%>
<%--                <source src="">--%>
<%--            </audio>--%>

<%--            <h3 class="section-title">歌手推荐</h3>--%>
<%--            <div class="row clearfix">--%>
<%--                <div class="col-md-12">--%>
<%--                    <div class="index_singer">--%>
<%--                        <c:forEach var="row" items="${singerRows}" varStatus="rowStatus">--%>
<%--                            <div class="col-md-4">--%>
<%--                                <c:forEach var="singer" items="${row}" varStatus="colStatus">--%>
<%--                                    <div class="singer-item">--%>
<%--                                        <a href="PageServlet?name=${singer.name}&method=queryMusic">--%>
<%--                                            <img class="singer-image" src="${singer.image}" alt="${singer.name}"/>--%>
<%--                                            <span class="singer-name">${singer.name}</span>--%>
<%--                                        </a>--%>
<%--                                    </div>--%>
<%--                                </c:forEach>--%>
<%--                            </div>--%>
<%--                        </c:forEach>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
        </div>
    </div>
    <%--底部（可完善）--%>
    <div class="footer">
        <div class="footer-content">
            <p><a href="#" target="_blank"><img src="<%=request.getContextPath()%>/img/one_footer1.png" alt="音乐人入驻"/> 入驻成为音乐人</a></p>
            <p><img src="<%=request.getContextPath()%>/img/one_footer1.png" alt="联系我们"/> 联系我们：doudizhu@qq.com</p>
        </div>
    </div>

</div>
</body>
<script src="<%=request.getContextPath()%>/static/plugins/jquery/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
<script src="<%=request.getContextPath()%>/static/js/util.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/index/index.js"></script>
</html>

